.box{
    width: 689px;
    height: 527px;
    /* border: 1px solid black; */
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
}
.top{
    width: 689px;
    height: 35px;
    border-bottom: 2px solid red;

}
.top-left{
    width: 84px;
    height: 35px;
    display: inline-block;
    cursor: pointer;
    
}
.box span{
    background: url(./images/index.png) no-repeat;
    width: 413px;
    height: 465px;
}
.top-left>span{
    background-position:-225px -152px;
    height: 33px;
    width: 33px;
    float: left;
    line-height: 33px;
}
.top-left>p{
    font-size: 20px;
    float: left;
    line-height: 35px;
}
.top-right{
    width: 40px;
    height: 35px;
    float: right;
}
.top-right>p{
    font-size: 12px;
    float: left;
    line-height: 35px;
    color: #666;
    cursor: pointer;
}
.top-right>span{
    background-position: 0 -240px;
    width: 12px;
    height: 12px;
    float: left;
    margin-top: 10px;
    cursor: pointer;
}
.bottom{
    margin-top: 20px;
    background-color: sandybrown;
    width: 689px;
}
.bottom-diyi{
    width: 230px;
    height: 120px;
    padding-top: 20px;
    padding-left: 19px;
    float: left;
    border: 0.5px solid rgb(211, 211, 211);
    cursor: pointer;
}
.bottom-diyi>img{
    float: left;
}
.img-name1{
    float: left;
    margin: 6px 0px 0px 10px;
}
.img-name1>h3{
    font-size: 14px;

}
.bottom-diyi:nth-child(3){
    width: 226px;
}
.img-name1 .span1{
   display: inline-block;
    height: 22px;
    width: 22px;
    background-position: -267px -205px;
}
.img-name1 .span2{
    display: inline-block;
    background-position: -300px -205px;
    height: 22px;
    width: 22px;
}
.bottom-list ul{
    width: 230px;
    height: 352px;
    float: left;
    list-style: none;
    border: 0.5px solid rgb(211, 211, 211);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.bottom-list ul li{
    width: 227px;
    height: 31.6px;
    box-sizing: border-box;
}
.bottom-list ul li:nth-child(odd){
    background-color: rgb(232, 232, 232);
}
.bottom-list ul li:nth-child(even){
    background-color: rgb(244, 244, 244);
}
.bottom-list ul li p{
    width: 35px;
    height: 32px;
    color: #c10d0c;
    font-size: 16px;
    display: inline-block;
    margin-left: 12px;
    line-height: 32px;
    margin-bottom: 0;
}
.bottom-list ul li>a{
    color: #000000;
    font-size: 12px;
    cursor: pointer;
}
/* .bottom-list ul li>p:nth-child(-n+10):nth-child(n+4){
    color: #666666;
    background-color: red;
} */
.bottom-list ul li p:nth-child(n+4){
    color: #666666;
    /* background-color: red; */
}
.bottom-list ul li a:not(:last-child){
    width: 170px;
    height: 32px;
    display: inline-block;
    color: #000000;
    font-size: 12px;
    line-height: 32px;
}
.bottom-list ul li a .span-btn{
    width: 80px;
    height: 31px;
    display: inline-block;
    float: right;
    display: none;
}
.bottom-list ul li:hover .span-btn{
    display: block;
}

.bottom-list ul li a .span-btn span:nth-child(1){
    background-position: -267px -288px;
    width: 22px;
    height: 22px;
    float: left;
    margin-top: 10px;
}
.bottom-list ul li a .span-btn p{
    width: 22px;
    height: 22px;
    font-size: 24px;
    float: left;
    display: inline-block;
    margin: 0;
    color: #666666;
}
.bottom-list ul li a .span-btn span:nth-child(3){
    background-position: -292px -288px;
    width: 22px;
    height: 22px;
    float: left;
    margin-top: 10px;
}

.bottom-list ul li:nth-child(11) a {
    height: 32px;
    float: right;
    display: inline-block;
    margin-right: 30px;
    color: #000000;
    line-height: 32px;
}
.bottom-list ul:nth-child(3){
    width: 227px;
}

